<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(./image/1.jpg) no-repeat;
        }
        #box{
            text-align: center;
            padding: 50px 0;
            background-color: rgba(255,255,255,.2);
        }
        #box>img{
            /* 鼠标变成小手 */
            width: 150px;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){
            var imgs = document.querySelectorAll("img");
            imgs.forEach((item,index)=>{
                item.onclick = function(){
                    document.body.style.background = 'url(./image/'+(index+1)+'.jpg)'
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <img src="./image/1.jpg" alt="图片">
        <img src="./image/2.jpg" alt="图片">
        <img src="./image/3.jpg" alt="图片">
        <img src="./image/4.jpg" alt="图片">
        <img src="./image/5.jpg" alt="图片">
    </div>
</body>
</html>